<template>
  <div class='main'>
      <div class="main-part">
          <h2 style="font-weight:400;padding:20px;">待评价</h2>
      </div>
      <div class="main-part">
          <h3 style="font-weight:400;padding:20px;">订单信息</h3>
          <p>订单时间: <span>{{shopinfo.appointTime}}</span> </p>
          <p>服务方式: <span>{{shopinfo.appointWay}}</span></p>
          <el-button class="del" type="primary" @click="del(shopinfo.appointId)">删除订单</el-button>
      </div>
       <div class="main-part">
          <h3 style="font-weight:400;padding:20px;">店铺信息</h3>
          <p>店铺名: <span>{{shopinfo.shopName}}</span> </p>
          <p>店铺地址: <span>{{shopinfo.shopLocation}}</span></p>
          <p>联系电话: <span>{{shopinfo.shopPhone}}</span></p>
      </div>
      <div class="main-part">
          <h3 style="font-weight:400;padding:20px;">预定信息</h3>
           <p>预约者: <span>{{userinfo.userNickname}}</span></p>
          <p>备注: <span>{{shopinfo.appointRemarks}}</span></p>
      </div>
  </div>

</template>

<script>
import {deleteAppointRecord} from '../../../api/personalData/information/ordermessage'
import jwtDecode from 'jwt-decode'
import cookie from '../../cookie/index'
export default {
    name:'Ordermessage',
    data() {
        return {
            shopinfo:'',
            userinfo:''
        }
    },
    methods:{
        del(appointId){
            console.log(appointId);
            this.$confirm("此操作将永久删除数据,是否继续?",'提示',{
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
                }).then(() => {
                    deleteAppointRecord({appointId:appointId}).then(data=>{
                        const list =data.data.message
                        console.log(data.data.message);
                        if(list === '成功'){
                        this.$message({
                            type: "success",
                            message: "删除成功!"
                            })
                        // this.getList()
                        }else{
                        this.$message({
                            type: "warning",
                            message: "该订单未完成,不能删除!"
                            })
                        }
                    })
                })
        }
    },
    beforeRouteEnter (to, from, next) {
        if(this.$route.params!=={}){
            next()
        }
    },
    created(){
        const user = jwtDecode(cookie.getToken());
        this.userinfo =user
        this.shopinfo = this.$route.params.shop
    },
    mounted(){
        console.log( '@@@',this.$route.params);
        console.log(this.userinfo);
    }

}
</script>

<style lang='less' scoped>
.main{
    width: 100%;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
    // background: #76d4ff;
    position: relative;
    .main-part{
        width: 90%;
        padding-bottom: 30px;
        margin: 0 auto;
        border-bottom: 1px solid #d6d6d6;
        position: relative;
        p{
            margin-top: 10px;
            color: rgb(155, 155, 155);
            padding-left: 20px;
        }
        .again{
            position: absolute;
            top: 80px;     
            right: 20px;   
        }
         .del{
            position: absolute;
            top: 80px;     
            right: 150px;   
        }
    }
}
</style>